<template>
    <u-toast ref="uToast"></u-toast>
    <LookAround></LookAround>
    <view class="Login">
        <view class="LoginTip">{{ login_show ? "欢迎加入我们！" : "密码登录" }}
        </view>
        <!-- 登录信息 -->
        <view>
            <u-input placeholder="请输入手机号码" border="bottom" v-model="Users.mobile"
                     :customStyle="customStyle"></u-input>
            <!-- 获取验证码 -->
            <u-input v-if="login_show" type="number" placeholder="请输入短信验证码" border="bottom" v-model="Users.code"
                     :customStyle="customStyle">
                <template #suffix>
                    <u-code ref="uCode" @change="codeChange" keep-running start-text="获取验证码"></u-code>
                    <text @tap="getCode" :text="tips" style="color:#777777;" class="u-page__code-text">{{ tips }}</text>
                </template>
            </u-input>
            <!-- 请输入密码 -->
            <u-input v-else placeholder="请输入密码" border="bottom" type="password" v-model="Users.password"
                     :customStyle="customStyle">
            </u-input>
            <!-- 同意协议 -->
            <view class="agreement">
                <u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
                    <u-checkbox activeColor="#FF0000" :name="true"></u-checkbox>
                </u-checkbox-group>
                <view style="text-align: start;margin-top: 10rpx">
                    我已阅读并同意外卖狮 <span class="color" @click.stop="NavTo('/pages/UserAgreement/UseragreeText')">用户协议</span>
                    、
                    <span class="color"
                          @click.stop="NavTo('/pages/UserAgreement/userGetPrivacyPolicy?type=0')">隐私政策</span> 和
                    <span class="color" @click.stop="NavTo('/pages/UserAgreement/userGetPrivacyPolicy?type=1')">外卖狮骑手注册及合作协议</span>
                </view>
            </view>
            <!-- 登录 -->
            <view style="text-align: center">
                <view class="login boder_r" @click="login">登录</view>
                <view class="pass" @click="login_show = !login_show">
                    {{ login_show ? "密码登录" : "验证码登录" }}
                </view>
            </view>
            <!-- 第三方登录 -->
            <view class="Thirdparty">
                <!-- <view>第三方登录</view>
                <div class="weixin">
                  <u-icon color="#28C445" size="26" name="weixin-circle-fill"></u-icon>
                </div> -->
            </view>

        </view>
    </view>

    <c-agreement-dialog :isShowDialog="isShowAgree" @disagree="isShowAgree = false"
                        @agree="onAgreeClick">
    </c-agreement-dialog>
</template>
<script setup lang="ts">
import {getCurrentInstance, reactive, onDeactivated} from "vue";
import Login from "@/Hooks/Login/login";
import {NavTo} from "../../utlis/uni_api";

const {proxy} = getCurrentInstance() as any;
const {
    isShowAgree,
    onAgreeClick,
    tips,
    getCode,
    codeChange,
    seconds,
    checkboxChange,
    checkboxValue,
    login,
    login_show,
    Users,
} = Login(proxy);
const customStyle: any = {
    height: "65rpx",
};
onDeactivated(() => {
    Users.mobile = "";
    Users.code = "";
    Users.password = "";
});
</script>

<style lang="scss" scoped>
.Login {
    padding: 0 48rpx;
    font-size: $fontS_26;


    .LoginTip {
        font-size: $fontS_50;
        font-weight: 400;
        margin-left: 10rpx;
        height: 140rpx;
    }

    .register {
        margin: 43rpx 0 57rpx;
        color: $color_777;

    }

    .login {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background: $color_def;
        color: $color_fff;
    }

    .pass {
        color: $color_777;
        margin-top: 37rpx;
    }

    .Thirdparty {
        margin-top: 120rpx;
        text-align: center;
        color: $color_A4;
        font-size: $fontS_20;

        .weixin {
            display: flex;
            justify-content: center;
        }
    }

    .agreement {
        left: 0;
        right: 0;
        position: relative;
        color: $color_777;
        display: flex;
        font-size: $fontS_24;
        margin: 45rpx 0 45rpx 2rpx;

        .color {
            color: $color_def;
        }
    }
}

.agreement_text {
    width: 100%;
    height: 700rpx;
    padding: 50rpx 30rpx 50rpx 30rpx;
    overflow: auto;
}

.u-input {
    border-bottom: 1rpx solid #D8D8D8;
}
</style>
